<template>
  <base-echarts :width="width" :height="height" :options="options" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { EChartsOption } from 'echarts'
import baseEcharts from './base-echarts.vue'
import { getPieEchartsOption } from '../data/option.config'
import type { TChargingPileOption } from '../types/option'

const props = withDefaults(
  defineProps<{
    width?: string
    height?: string
    echartDatas: TChargingPileOption
  }>(),
  {
    width: '100%',
    height: '100%',
    echartDatas: () => [
      {
        value: 0,
        name: '广州占比',
        percentage: '0%',
        color: '#34D160',
      },
    ],
  },
)

const options = ref<any>({} as EChartsOption)

watchEffect(() => {
  options.value = getPieEchartsOption(props.echartDatas) as EChartsOption
})
</script>

<style scoped></style>
